<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rich Frame</title>
  </head>
  <body>
    <!-- <div class="editable" id="richedit" contenteditable></div> -->
    <iframe
      name="richedit"
      style="height: 300px; width: 100%"
      srcdoc="sadajsfjashfkashfkasf"
    ></iframe>

    <script>
      window.addEventListener('load', () => {
        frames['richedit'].document.designMode = 'on';

        // 在内嵌窗格中切换粗体文本样式
        frames['richedit'].document.execCommand('bold', false, null);
        // 在内嵌窗格中切换斜体文本样式
        frames['richedit'].document.execCommand('italic', false, null);
        // 在内嵌窗格中创建指向www.wrox.com 的链接
        frames['richedit'].document.execCommand(
          'createlink',
          false,
          'http://www.wrox.com'
        );
        // 在内嵌窗格中为内容添加<h1>标签
        frames['richedit'].document.execCommand('formatblock', false, '<h1>');

        // 切换粗体文本样式
        frames['richedit'].document.execCommand('bold', false, null);
        // 切换斜体文本样式
        frames['richedit'].document.execCommand('italic', false, null);
        // 创建指向www.wrox.com 的链接
        frames['richedit'].document.execCommand(
          'createlink',
          false,
          'http://www.wrox.com'
        );
        // 为内容添加<h1>标签
        frames['richedit'].document.execCommand('formatblock', false, '<h1>');

        let selection = frames['richedit'].document.getSelection();
        // 取得选中的文本
        let selectedText = selection.toString();
        // 取得表示选区的范围
        let range = selection.getRangeAt(0);
        // 高亮选中的文本
        let span = frames['richedit'].document.createElement('span');
        span.style.backgroundColor = 'yellow';
        range.surroundContents(span);
      });
    </script>
  </body>
</html>
